<template>
	<view class=" column">
		
		
		
		<canvas canvas-id="mycanvas" style="width: 320px;height: 200px; "></canvas>
		
		<!-- 显示的页面 -->
		<view class="myShare"  v-show="false">
			
			<view class="zi">邀请好友领积分</view>
			<view class="font">
				<view class="font_info">
					<button class="share" open-type="share">
					
						<view>微信好友</view>
					</button>
				</view>
				<view class="font_info" v-if="writePhotosAlbum==false">
					<button class="share" open-type="openSetting">
						
						<view>保存图片</view>
					</button>
				</view>
				
				<view class="font_info" @tap="saveImage" v-else>
					
					<view>保存图片</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				wxurl:"https://work.weixin.qq.com/gm/468b6fa398becc4621a6709863400ddf",
				app: getApp().globalData.apiUrl,
				result: '', //生成海报的url
				er: '',
				imgurl: '',
				canvasShow: true,
				canvasercode: '',
				bj: '',
				writePhotosAlbum: undefined
			};
		},
		onShow() {
			let that = this;
			uni.getSetting({
				success: res => {
					that.writePhotosAlbum = res.authSetting["scope.writePhotosAlbum"];
					console.log(this.writePhotosAlbum,"11111111111111")
				}
			})
		},
		onLoad() {
			/* 二维码接口 */
			/* 邀请 */
			let that = this;
			// let url = '/api/user/userImage';
			// let data = {
			// 	token: uni.getStorageSync('userInfo').token
			// };
			// this.$request.post(url, data).then(res => {
			// 	that.er = res.data.file;
			// 	console.log('获取的er' + that.er);
			// 	that.downfile(this.er);
			// });
		},
		onShareAppMessage: function() {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: this.imgurl,
				success: function(res) {
					console.log(res);
				}
			};
		},
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: this.imgurl
			}
		},
		onHide() {
			// uni.removeStorageSync('person-card');
		},
		mounted() {
			// if (uni.getStorageSync('person-card')) {
			// 	this.canvasShow = false;
			// 	this.imgurl = uni.getStorageSync('person-card');
			// } else {
				this.canvasImage();
			// }
		},
		methods: {
			
			startmessage(p){
				
			},
			completemessage(p){
				
			},
			//网路图片先下载再绘制
			downfile(e) {
				let that = this;
				uni.downloadFile({
					url: e, //仅为示例，并非真实的资源
					success: res => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							that.canvasercode = res.tempFilePath;
							console.log(that.canvasercode);
							that.canvasImage();
						}
					}
				});
			},
			canvasImage() {
				console.log('绘制');

				let myCanvas = uni.createCanvasContext('mycanvas', this);
				// 绘制背景
				myCanvas.drawImage("/static/qrcode.png", 90, 20, 140, 140);
				//*******************************************************设置二维码大小就好了位置
				// myCanvas.drawImage('/static/find.png', 185, 420, 375, 375);
				let fontSize = 18;
				 myCanvas.font = `bold ${fontSize}px Arial`;
				myCanvas.fillStyle = '#000000'; //填充线样式
				myCanvas.fillText('ai设计系统-设辑', 92, 180);
				myCanvas.draw(true, () => {
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: res => {
							///************************************************有个保存图片到本地的方法
							this.imgurl = res.tempFilePath;
							this.canvasShow = false;
							uni.hideLoading();
							//uni.setStorageSync('person-card', this.imgurl);
						},
						fail: () => {
							uni.showToast({
								title: '名片加载失败',
								duration: 2000
							});
						}
					});
				});
			},

			saveImage() {
				console.log(123)
				uni.saveImageToPhotosAlbum({
					filePath: this.imgurl,
					success: () => {
						uni.showToast({
							title: '保存成功',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: "none"
						});
					}
				});
				return
				uni.showActionSheet({
					itemList: ['保存图片', '取消'],
					success: res => {
						if (res.tapIndex == 0) {

						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	@import url("../../common/uni.css");
	
	.poster_box {
		width: 100vw;
		height: 100vh;
		background-color: #fef8e8;
	}

	/* 去除点button的默认样式 */
	.share {
		background-color: rgba(0, 0, 0, 0);
		padding: 0;
		color: #ffffff;
		font-size: 32upx;
		line-height: 1.4;
	}

	.share::after {
		border: none;
	}






	.myShare {
		width: 100vw;
		height: 1200upx;
		position: fixed;
		bottom: 0;
		left: 0;

		.zi {
			color: #ff4d30;
			font-size: 70upx;
			font-weight: bold;
			position: absolute;
			top: 13%;
			width: 750upx;
			text-align: center;
			left: 0;
			z-index: 666;
			letter-spacing: 2px;
		}

		.my_img {
			width: 750upx;
			height: 1200upx;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;
		}

		.er_box {
			position: absolute;
			z-index: 99;
			top: 35.7%;
			left: 24.7%;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 375rpx;
			height: 375rpx;
			background-color: #FFFFFF;
		}

		.er {

			width: 345rpx;
			height: 345rpx;
		}

		.font {
			position: absolute;
			left: 0;
			bottom: 90upx;
			font-size: 32upx;
			color: #ffffff;
			z-index: 66;
			width: 100vw;
			height: 250upx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;

			.font_info {
				width: 225upx;
				height: 160upx;
			}

			image {
				width: 100upx;
				height: 100upx;
			}
		}
	}
</style>

